<template>
  <div class="table-box">
    <ProTable ref="proTable" :columns="columns" :request-api="queryPreviewOrderDetailList">
      <!-- 表格 header 按钮 -->
      <template #tableHeader>
        <!-- <el-button type="primary" :icon="CirclePlus">添加订单</el-button> -->
      </template>
      <template #createDate="scope">
        {{ scope.row.createDate.replace("T", " ").split(".")[0] }}
      </template>
      <template #updateDate="scope">
        {{ scope.row.updateDate.replace("T", " ").split(".")[0] }}
      </template>
      <template #offshoreProcurementReceipts="scope">
        <UploadImg v-model:image-url="scope.row.offshoreProcurementReceipts" width="80" height="80" disabled> </UploadImg>
      </template>
      <!-- 表格操作 -->
      <template #operation="scope">
        <el-button v-if="scope.row.previewStatus === 0" type="primary" link :icon="EditPen" @click="openPreviewDialog(scope.row)">
          审核
        </el-button>
      </template>
    </ProTable>
    <!-- 订单详情 -->
    <el-dialog width="50%" title="订单明细详情" v-model="detailDialogVisible">
      <el-descriptions :border="true">
        <el-descriptions-item label="订单名称">{{ selectedRow.orderName }}</el-descriptions-item>
        <el-descriptions-item label="订单编号">{{ selectedRow.orderNumber }}</el-descriptions-item>
        <el-descriptions-item label="订单明细编号">{{ selectedRow.orderDetailNumber }}</el-descriptions-item>
        <el-descriptions-item label="商品名称">{{ selectedRow.commodityName }}</el-descriptions-item>
        <el-descriptions-item label="商品数量">{{ selectedRow.commodityCount }}</el-descriptions-item>
        <el-descriptions-item label="总金额">{{ selectedRow.totalAmount }}</el-descriptions-item>
        <el-descriptions-item label="创建时间">
          {{ selectedRow.createDate.toString().replace("T", " ").split(".")[0] }}
        </el-descriptions-item>
        <el-descriptions-item label="创建者">{{ selectedRow.createUserName }}</el-descriptions-item>
        <el-descriptions-item label="是否外采">{{ selectedRow.isOffshoreProcurement === 1 ? "是" : "否" }}</el-descriptions-item>
        <el-descriptions-item label="外采单据" v-if="selectedRow.offshoreProcurementReceipts" :span="3">
          <UploadImg v-model:image-url="selectedRow.offshoreProcurementReceipts" disabled> </UploadImg>
        </el-descriptions-item>
      </el-descriptions>
      <el-card class="box-card">
        <el-form ref="previewFormRef" :model="previewParam" :rules="previewFRuleForm" label-width="150px" class="demo-ruleForm">
          <el-form-item label="审核选择">
            <el-radio-group v-model="previewParam.previewStatus">
              <el-radio :label="1" :value="1">审核通过</el-radio>
              <el-radio :label="2" :value="2">审核拒绝</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="审核备注" prop="previewRemark">
            <el-input type="textarea" v-model="previewParam.previewRemark"></el-input>
          </el-form-item>
        </el-form>
      </el-card>

      <template #footer>
        <span class="dialog-footer">
          <el-button type="info" @click="detailDialogVisible = false">取消</el-button>
          <el-popconfirm title="是否提交审核" @confirm="previewOrderDetail(previewFormRef)" placement="top-start">
            <template #reference>
              <el-button type="success" @click="">提交审核</el-button>
            </template>
          </el-popconfirm>
        </span>
      </template>
    </el-dialog>
  </div>
</template>
<script setup lang="ts" name="orderPreview">
import { ref, reactive, onMounted } from "vue";
import { ElMessage, ElMessageBox } from "element-plus";
import type { FormInstance, FormRules } from "element-plus";
import { CirclePlus, Delete, EditPen, Download, Upload, View, Refresh, ElementPlus } from "@element-plus/icons-vue";
import ProTable from "@/components/ProTable/index.vue";
import UploadImg from "@/components/Upload/Img.vue";
import { ProTableInstance, ColumnProps } from "@/components/ProTable/interface";
import { OrderPreviewList, PreviewOrderDetailsParam } from "@/api/interface/order";
import { previewOrderDetails, queryPreviewOrderDetailList } from "@/api/modules/order";
import { orderDetailPreviewStatusEnum, statusFieldNames } from "@/enums/httpEnum";

const proTable = ref<ProTableInstance>();

const detailDialogVisible = ref(false);

const columns = reactive<ColumnProps<OrderPreviewList>[]>([
  { type: "index", label: "", width: 80 },
  {
    prop: "orderDetailNumber",
    label: "订单明细编号",
    width: 200
  },
  {
    prop: "orderNumber",
    label: "所属订单编号",
    width: 200
  },
  {
    prop: "orderName",
    label: "订单名称",
    width: 120
  },
  {
    prop: "commodityName",
    label: "商品名称",
    width: 100
  },
  {
    prop: "commodityCount",
    label: "商品数量",
    width: 100
  },

  {
    prop: "totalAmount",
    label: "总金额"
  },
  {
    prop: "isOffshoreProcurement",
    label: "是否外采",
    width: 100
  },
  {
    prop: "offshoreProcurementReceipts",
    label: "外采单据",
    width: 150
  },
  {
    prop: "createDate",
    label: "创建时间",
    width: 200
  },
  {
    prop: "createUserName",
    label: "创建者",
    width: 200
  },
  {
    prop: "previewStatus",
    label: "审核状态",
    tag: true,
    width: 200,
    enum: orderDetailPreviewStatusEnum,
    fieldNames: statusFieldNames,
    search: { el: "select", props: { filterable: true } }
  },
  {
    prop: "previewDate",
    label: "审核时间",
    width: 200
  },
  {
    prop: "previewUserName",
    label: "审核者",
    width: 200
  },
  {
    prop: "previewRemark",
    label: "审核备注",
    width: 200
  },
  { prop: "operation", label: "操作", fixed: "right", width: 150 }
]);

const selectedRow = reactive<OrderPreviewList>({
  orderDetailId: "",
  orderDetailNumber: "",
  orderDetailPreviewId: "",
  previewStatus: 0,
  previewRemark: "",
  orderId: "",
  orderName: "",
  orderNumber: "",
  totalAmount: 0,
  commodityCount: 0,
  commodityId: "",
  commodityName: "",
  isOffshoreProcurement: 0,
  offshoreProcurementReceipts: "",
  createDate: new Date(),
  createUserId: "",
  createUserName: ""
});

const previewParam = reactive<PreviewOrderDetailsParam>({
  orderDetailPreviewIdList: [],
  previewStatus: 1,
  previewRemark: ""
});

/** 填报订单明细Form表单 */
const previewFormRef = ref<FormInstance>();

/** 填报订单明细Form表单验证规则 */
const previewFRuleForm = reactive<FormRules>({
  previewRemark: [
    {
      validator: (_, value, callback) => {
        if (previewParam.previewStatus === 2 && !value) {
          callback(new Error("审核拒绝时审核备注不能为空"));
        } else {
          callback();
        }
      },
      trigger: "blur"
    }
  ]
});

const openPreviewDialog = (param: OrderPreviewList) => {
  detailDialogVisible.value = true;
  Object.assign(selectedRow, param);
};

const previewOrderDetail = async (formEl: FormInstance | undefined) => {
  if (!formEl) return;
  await formEl.validate(async (valid, fields) => {
    if (valid) {
      previewParam.orderDetailPreviewIdList = [selectedRow.orderDetailPreviewId];
      await previewOrderDetails(previewParam);
      ElMessage.success("审核订单明细成功");
      detailDialogVisible.value = false;
      proTable.value?.getTableList();
    } else {
      ElMessage.error("请填入必填数据");
    }
  });
};
</script>
